<template>
    <div>
        <div class="sy-tit">订单全寿命周期实时利率分布</div>
        <div id="myChart" style="width:1000;height:300px; margin:0 auto;margin-bottom:-60px"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.InitChart()
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 指定图表的配置项和数据
            var option = {
                color: ['#caf982', '#8080ff', '#ed818e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                    formatter: function (params) {
                        console.log(params)
                        var relVal = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesName === '单个供应商') {
                                relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value
                            }
                            if (params[i].seriesName === '单笔订单') {
                                relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value
                            }
                            if (params[i].seriesName === '实时平均价') {
                                relVal += '<br/>' + params[i].seriesName + '(万)' + ' : ' + params[i].value
                            }
                        }
                        return relVal
                    },
                },
                toolbox: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                legend: {
                    data: ['单个供应商', '单笔订单', '实时平均价'],
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '占权比重',
                        min: 0,
                        max: 15,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                    },
                ],
                grid: {
                    right: 5,
                    left: 5,
                    top: 50,
                    containLabel: true,
                },
                series: [
                    {
                        name: '单个供应商',
                        type: 'scatter',
                        symbolSize: 10,
                        data: [2.3],
                    },
                    {
                        name: '单笔订单',
                        type: 'scatter',
                        data: ['-', '-', 5.6],
                    },
                    {
                        name: '实时平均价',
                        type: 'line',
                        smooth: true,
                        data: [3.2, 6.3, 1.3, 2.3, 1.2, 6.8, 5.3, 2, 3, 6.0, 3.3, 3.5, 0.2, 0.4],
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.sy-tit {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #666666;
    margin-top: 20px;
}
</style>